<template>
    <div class="wrapper">
        <!-- header -->
        <!-- 用公共组件代替，减少冗余代码 -->
        <Header name="流水明细" />

        <!--交易流水列表-->
        <ul id="transaction">
            <li id="transactionItem" class="card" v-for="item in transactionArr">
                <div class="left">
                    <p>交易单号：{{ item.transactionId }}</p>
                    <p>交易时间：{{ item.time }}</p>
                    <p>交易类型：{{ (item.transactionType) == 1 ? '充值' : (item.transactionType == 2 ? '提现' : '消费') }}</p>
                </div>
                <div class="right">
                    {{ (item.transactionType) == 1 ? '+' : '-' }}{{ item.amount }}
                </div>

            </li>
        </ul>


    </div>
</template>

<script>

import Header from "@/components/Header.vue"

export default {
    name: "Transaction",

    data() {
        return {
            user: {},
            walletId: this.$route.query.walletId,
            transactionArr: [],
        }
    },

    created() {
        this.user = this.$getSessionStorage('user');
        // console.log(this.walletId)
        let url = `VirtualWalletController/walletTransactions/walletId/${this.walletId}`
        this.$axios.get(url).then(response => {
            this.transactionArr = response.data.result;
            console.log(response.data.result)
            // console.log(this.transactionArr)
        }).catch(error => {
            console.error(error);
        });
    },

    components: {
        Header,
    },

}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
    width: 100%;
}

#transaction {
    margin-top: 13vw;
}

#transactionItem {
    /* justify-content: center; */
    width: 92vw;
    height: 18vw;
    margin: 1.6vw 4vw;
    display: inline-block;
}

.left {
    width: 60vw;
    font-size: 3.8vw;
    margin-left: 2vw;
    display: inline-block;
}

.right {
    width: 29vw;
    height: 21.5vw;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    font-size: 5.5vw;
}
</style>